<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
	<script type="text/javascript" src="30days.js"></script>
	<title>day 14 - homework slide toggle custom method</title>
	<style>
	body { width: 400px; margin: 100px auto; }

	.box {
		width: 400px;
		background: red;
		position: relative;
		overflow: hidden;
	}
	</style>
</head>



<body>

<div class="box">
	<h2>Hi There</h2>
	<p>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</p>
</div>

<p><button>FadeSlideToggle</button></p>

<script>

$(document).ready(function(){
	
	var box = $('div.box');
	
	$.fn.FadeSlideToggle = function (speed,fn) {
		
		// always return your the jquery obj from your custom methods
		// so that the method can be chainned
		return $(this).animate({
			'height': 'toggle',
			opacity: 'toggle'
		},speed || 2000, function () { // if no speed available ... set default to 2000 millisecounds.
			//fn(); // callback function when the method is finished
			// check if callback function is defined (the left side only run if the left side is true)
			$.isFunction(fn) && fn.call(this); 
		}); 
	};
	
	$('button').on('click', function () {
		// call method and use chaining jquery capacity
		box.FadeSlideToggle(500, function() {
			console.log('finished');
		}).addClass('test');
	});
});

</script>



</body>




</html>